<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: xlm
 * @LastEditTime: 2021-07-09 17:22:50
 * @description: file content
 -->
<template>
  <base-page-view class-name="page-container certification-page" v-if="showPage">
    <view class="certification-content">
      <view class="certification-title">基础信息</view>
      <view class="card-box new-card-box">
        <!-- <view class="card new-card" :class="real.auth_type!=='idCard'?'no-border':''">
          <span class="text">证件类型</span>
          <span class="content_input" @click="showAuthType()">{{real.auth_typeStr}}</span>
          <b-image :is-asset="true" @click="showAuthType()" src="/static/images/mine/arrow-below-black.png" width="26" height="14"></b-image>
        </view> -->
        <view v-if="real.auth_type!=='idCard'">
          <view class="upload-card">
            <view class="tit">请拍摄并上传你的身份照片</view>
            <view class="tip-box">
              <view>支持jpg、png或jpeg格式5M以内，证件照只有一面可上传1张</view>
            </view>
            <view class="box">
              <view class="item">
                <b-image :is-asset="!real.front" :src="real.front ? real.front : '/static/images/mine/card-front-demo.png'" width="243" height="162" @click="uploadImage('front')"></b-image>
                <view class="tip">拍摄正面</view>
              </view>
              <view class="item">
                <b-image :is-asset="!real.back" :src="real.back ? real.back : '/static/images/mine/card-back-demo.png'" width="243" height="162" @click="uploadImage('back')"></b-image>
                <view class="tip">拍摄反面</view>
              </view>
            </view>
          </view>
        </view>
        <view class="card new-card" :class="{'b_border':real.auth_name?true:false}">
          <span class="text" :class="{'text-grey': updateRealname && codeValid}">真实姓名</span>
          <input
            v-model="real.auth_name"
            placeholder="请输入"
            :class="{'updateRealname':updateRealname && codeValid}"
            class="content_input"
            placeholder-class="placeholderClass"
            :disabled="updateRealname"
            @input="inputFocus($event, 1)"
            @focus="inputFocus($event, 1)"
            @blur="inputBlur(1)" />
          <image v-if="delete1" src="/static/images/icon/icon_close.png" mode="aspectFit" class="delete" @click="real.auth_name = ''" />
        </view>
        <view class="card new-card">
          <span class="text" :class="{'text-grey': updateRealname && codeValid}">证件号码</span>
          <input v-model="real.auth_no" maxlength="18" placeholder="请输入" :class="{'updateRealname':updateRealname && codeValid}" class="content_input" placeholder-class="placeholderClass" :disabled="updateRealname" @input="inputFocus($event, 2)" @focus="inputFocus($event, 2)" @blur="inputBlur(2)" />
          <image v-if="delete2" src="/static/images/icon/icon_close.png" class="delete" @click="real.auth_no=''" />
        </view>
        <view v-if="real.auth_type!=='idCard'">
        <view class="foreign-card card" :class="{'b_border':real.bank_name?true:false}">
          <span class="text">出生日期</span>
          <picker mode="date" style="flex:1" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
            <view class="uni-input">{{date}}</view>
          </picker>
          <b-image :is-asset="true" src="/static/images/mine/arrow-below-black.png" width="26" height="14"></b-image>
        </view>
        <view class="foreign-card card" :class="{'b_border':real.bank_name?true:false}">
          <span class="text">国<span style="opacity:0">占位</span>籍</span>
          <span class="content_input" style="flex:1;min-height: 28rpx;" @click="showAuthType('nationality')">{{real.countryName}}</span>
          <b-image :is-asset="true" @click="showAuthType('nationality')" src="/static/images/mine/arrow-below-black.png" width="26" height="14"></b-image>
        </view>
        <view class="foreign-card card" :class="{'b_border':real.bank_name?true:false}">
          <span class="text">性<span style="opacity:0">占位</span>别</span>
          <span class="content_input" style="flex:1;min-height: 28rpx;" @click="showAuthType('gender')">{{real.gender}}</span>
          <b-image :is-asset="true" @click="showAuthType('gender')" src="/static/images/mine/arrow-below-black.png" width="26" height="14"></b-image>
        </view>
        </view>
      </view>
      <view v-if="real.auth_type==='idCard'">
        <view class="certification-title">银行信息</view>
        <view class="card-box">
          <view class="card" :class="{'b_border':real.bank_no?true:false}" 
             :style="useBottomGreyLine?'border-bottom: 1px solid #999;':'border-bottom: 1px solid #eaeaea;'">
            <span class="text ">银行卡号</span>
            <input
              v-model="bank_no"
              maxlength="22"
              placeholder="请输入"
              class="content_input"
              placeholder-class="placeholderClass"
              :disabled="updateRealname && !codeValid"
              @input="inputFocus($event, 3)"
              @focus="inputFocus($event, 3)"
              @blur="inputBlur(3)" />
            <image v-if="delete3" src="/static/images/icon/icon_close.png" class="delete" @click="bank_no=''" />
          </view>
          <view class="card" :class="{'b_border':real.bank_name?true:false}">
            <span class="text">所属银行</span>
            <input v-model="real.bank_name" placeholder="请选择" class="content_input" placeholder-class="placeholderClass" disabled="true" @click="chooseBank" />
            <image v-if="!(updateRealname && !codeValid)" src="/static/images/icon/icon_arror_right.png" mode="aspectFit" alt="" class="icon_my_more" />
          </view>
          <address-picker
            :show="showAddressPicker"
            key-str="name"
            :default-data="[addressData.province,addressData.city,addressData.area]"
            @close="showAddressPicker = false"
            @confirm="onConfirm" />
          <view class="card" :class="{'b_border':real.bank_area?true:false}" @tap="showAddress">
            <span class="text">开户所在地</span>
            <input v-model="real.bank_area" placeholder="请选择" class="content_input" placeholder-class="placeholderClass" disabled="true" />
            <image v-if="!(updateRealname && !codeValid)" src="/static/images/icon/icon_arror_right.png" mode="aspectFit" alt="" class="icon_my_more" />
          </view>
          <view class="card">
            <span class="text">预留手机</span>
            <input
              v-model="real.bank_mobile"
              type="number"
              :disabled="updateRealname && !codeValid"
              maxlength="11"
              placeholder="请输入"
              class="content_input"
              placeholder-class="placeholderClass"
              @input="inputFocus($event, 4)"
              @focus="inputFocus($event, 4)"
              @blur="inputBlur(4)" />
            <image v-if="delete4" src="/static/images/icon/icon_close.png" class="delete" @click="real.bank_mobile=''" />
          </view>
        </view>
      </view>
    </view>
    <view class="inland-status-tip" v-if="real.auth_type==='idCard' && real.status_msg">温馨提示：{{real.status_msg}}</view>
    <!-- <view v-if="!codeValid && updateRealname" class="saveReal" @click="saveReal">
      <view class="text">{{ saveText }}</view>
    </view> -->
    <view class="saveReal" :class="{'saveRealUn': canSub||real.status===2}" @click="saveReal">
      <!-- <view class="text" v-if="real.status===2">{{ saveText }}</view> -->
      <view class="text" v-if="real.status_cloud===3">{{ saveText }}</view>
      <b-open-type v-if="real.status_cloud===3" open-type="contact"/>
      <view class="text" v-else>{{ saveText }}</view>
    </view>
    <view class="status-tip" v-if="real.auth_type!=='idCard' && real.status_msg">温馨提示：{{real.status_msg}}</view>
    <verifyPhone v-if="showPhoneDialog" 
      :phone="user.mobile" 
      @close="showPhoneDialog=false"
      @validMsg="validMsg"
      @sendMsg="sendMsg"
    />
    <my-picker
      :show="showPicker"
      v-if="showPicker"
      key-str="name"
      :default-data="list"
      ackBtnColor="#007FFF"
      @close="showPicker = false"
      @confirm="myOnConfirm"/>
  </base-page-view>
</template>

<script>
import './bindBank.scss'
import { mapGetters } from 'vuex'
import { regexp } from '@/utils/regexp'
import verifyTime from '@/components/verifyTime/index.vue'
import addressPicker from '../address/address-picker/index.vue'
import { h5NavigateTo } from '@/utils/navigateTo'
import myPicker from '../certification/components/myPicker.vue'
import verifyPhone from '../certification/components/verifyPhone.vue'
export default {
  components: {
    addressPicker,
    verifyTime,
    myPicker,
    verifyPhone
  },
  data() {
    const currentDate = this.getDate({
      format: true
    })
    return {
      result: '',
      showAddressPicker: false,
      showPhoneDialog: false,
      waittingMsg: false,
      codeValid: false, // 验证码
      addressData: [],
      bank_no: '',
      real: {
        auth_name: '',
        auth_no: '',
        auth_type: '',    // 证件码
        auth_typeStr: '', // 证件名称
        bank_no: '',
        bank_name: '',
        bank_mobile: '',
        front: '', //证件证正面
        back: '',   // 证件证反面
        birthday: '', // 出生日期
        country: '', // 国别码
        countryName: '', // 国别
        gender: '', // 性别
        certificates: []
      },
      dataName: {
        auth_name: '请输入真实姓名',
        auth_no: '请输入证件号码',
        bank_no: '请输入银行卡号',
        bank_name: '请选择所属银行',
        bank_area: '请选择开户所在地',
        bank_mobile: '请输入手机号',
        front: '请上传证件照',
        back: '请上传证件照',
        birthday: '请选择出生日期',
        country: '请选择国籍',
        gender: '请选择性别',
      },
      delete1: false,
      delete2: false,
      delete3: false,
      delete4: false,
      delete5: false,
      updateRealname: false,

      showPicker: false,
      date: currentDate, // 出生日期
      list: [
        {
          name: '身份证',
        },
        {
          name: '护照',
        },
        {
          name: '港澳居民来往内地通行证',
        },
        {
          name: '台湾居民来往内地通行证',
        },
        {
          name: '中华人民共和国港澳居民居住证',
        },
        {
          name: '中华人民共和国台湾居民居住证',
        },
        {
          name: '外国人永久居留身份证',
        },
        {
          name: '中华人民共和国外国人就业许可证书',
        },
      ],
      auth_types: [],
      useBottomGreyLine: false, // 使用颜色更深的下划线
      saveText: '', // 按钮文字
      realStatus: '',
      status: '',
      status_cloud: '',
      curSelectedType: '',
      countryList: [],  // 国别码列表
      showPage: false
    }
  },
  computed: {
    // saveText() {
    //   let c = ''
    //   if (this.updateRealname && this.codeValid) {
    //     c = '确定'
    //   } else if (this.updateRealname) {
    //     c = '联系客服修改'
    //   } else {
    //     c = '确认提交'
    //   }
    //   return c
    // },
    startDate() {
        return this.getDate('start');
    },
    endDate() {
        return this.getDate('end');
    },
    canSub() {
      let canSub = ''
      if (!this.real.auth_name && this.real.auth_name !== 0) {
        canSub = 'auth_name'
      } else if (!this.real.auth_no && this.real.auth_no !== 0) {
        canSub = 'auth_no'
      }  
      if(this.real.auth_type !== 'idCard') {
        // 国外用户校验出生日期, 国籍, 性别
        if(!this.real.front || !this.real.back){
          canSub = 'front'
        }
        console.log("计算出生日期")
        if (!this.date) {
          canSub = 'birthday'
        } 
        if(!this.real.countryName){
          canSub = 'country'
        } 
        if(!this.real.gender){
          canSub = 'gender'
        } 
         
      } else {
        if (!this.real.bank_mobile && this.real.bank_mobile !== 0) {
          canSub = 'bank_mobile'
        } else if (!this.real.bank_no && this.real.bank_no !== 0) {
          canSub = 'bank_no'
        } else if (!this.real.bank_name && this.real.bank_name !== 0) {
          canSub = 'bank_name'
        } else if (!this.real.bank_area && this.real.bank_area !== 0) {
          canSub = 'bank_area'
        }
      }
      return canSub
    },
    ...mapGetters(['user'])
  },
  watch: {
    bank_no() {
      console.log("watch数据:", 'bank_no')
      this.bank_no = this.maskValue(this.bank_no, '9999 9999 9999 9999999')
      this.real.bank_no = this.bank_no.replace(/\s*/g, '')
    }
  },
  onLoad(options) {
    uni.showLoading()
    if (options.updateRealname) {
      this.updateRealname = options.updateRealname
    } else {
      this.updateRealname = false
    }
    setTimeout(() => {
      if (options.examine === 'true') {
        uni.showToast({
          title: '审核未通过, 请重新提交',
          icon: 'none',
          duration: 2 * 1000
        })
      }
    }, 1000)
  },
  async onShow() {
    await this.getCountryList()
    const realName = uni.getStorageSync('realName')
    // console.log('realName', realName)
    if (realName) {
      this.real = JSON.parse(realName)
    } else {
      // console.time()
      await this.certificationGet()
      // console.log("realName:", this.real)
      // console.timeEnd("over")
    }
    // await this.certificationGet()
    let imgs = JSON.stringify(['', ''])
    let test = {
      auth_name: '熊礼明',
      auth_no: '411522199007094518',
      bank_no: "6217001930050756874",
      bank_name: '中国建设银行',
      bank_mobile: '15811558032',
      bank_area: '福建省厦门市思明区',
      front: '', //证件证正面
      back: '',   // 证件证反面
      // certificates: imgs
    }
    this.real = Object.assign(this.real, test)
    this.real.auth_type = ''
    if (this.real) {
      this.bank_no = this.real.bank_no
      // 云账号认证状态
      // Submit("Submit", 2, "提交审核"),
      // NONE("NONE", 0, "NONE"),
      // Scuess("Scuess", 3, "成功"),
      // Fail("Fail", 4, "审核失败");
      this.real.status_cloud = 2
      this.status_cloud = this.real.status_cloud
      if (this.status_cloud === 3) {
        this.realStatus = '已实名'
        this.saveText = '联系客服修改'
      } else if (this.status_cloud === 2) {
        this.realStatus ='立即修改'
        this.saveText = '立即修改'
        // 当审核中时不支持修改提示：审核中不支持修改
      } else {
        this.realStatus ='未实名'
        this.saveText ='确认提交'
      }

      this.list = this.real.auth_types
      this.auth_types = JSON.parse(JSON.stringify(this.real.auth_types))
      if(!this.real.auth_type || this.real.auth_type === 'id_card'){
        this.real.auth_type = 'idCard'
      }
      this.real.auth_typeStr = this.auth_types.find((item)=>{
        return item.type === this.real.auth_type
      }).name
      if(this.real.certificates){
        let arr = this.real.certificates.split(",")
        this.real.front = arr[0]
        this.real.back = arr[1]
      }
      if(this.real.birthday){
        console.log("日期切割")
        this.real.birthday = ('' + this.real.birthday).match(/(\d{4})(\d{2})(\d{2})/).slice(1).join('-')
      }
      if(this.real.country){
        this.real.countryName = this.countryList.find((item)=>{
          return item.type === this.real.country
        }).name
      }
      this.showPage = true
      uni.hideLoading()
    }
  },
  methods: {
    async getCountryList(){
      const res = await this.$api.commissionApi.certificationCountry()
      if(res.code===0){
        this.countryList = res.data || []
      } 
    },
    showAuthType(type){
      console.log("showAuthType:", type, this.updateRealname)
      if(this.updateRealname){
        return
      }
      // 显示哪个类型的弹窗 type  证件, 出生日期, 国籍, 性别
      this.curSelectedType = type || ''
      if(type==='nationality'){
        this.list = this.countryList
      }else if(type==='gender'){
        this.list = [{name: '男'}, {name: '女'}]
      }else {
        this.list = this.auth_types
      }
      this.showPicker = true
    },
    // 确认选择的证件类型
    myOnConfirm(index){
      this.showPicker = false
      if(this.curSelectedType==='nationality'){
        this.real.country = this.countryList[index].type
        this.real.countryName = this.countryList[index].name
      }else if(this.curSelectedType==='gender'){
        let arr = [{name: '男'}, {name: '女'}]
        this.real.gender = arr[index].name
      }else{
        // 证件类型
        this.real.auth_type = this.auth_types[index].type
        this.real.auth_typeStr = this.auth_types[index].name 
      }
    },
    bindDateChange: function(e) {
      this.date = e.target.value
      this.real.birthday = this.date.replaceAll("-", '')
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (type === 'start') {
          year = year - 60;
      } else if (type === 'end') {
          year = year + 2;
      }
      month = month > 9 ? month : '0' + month;;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    showAddress() {
      if (this.updateRealname && !this.codeValid) {
        return
      }
      this.showAddressPicker = true
    },
    chooseBank() {
      if (this.updateRealname && !this.codeValid) {
        return
      }
      uni.setStorageSync('realName', JSON.stringify(this.real))
      if (this.updateRealname) {
        this.$navigateTo('/pagesMine/certification/bankChoose?updateRealname=true', {})
      } else {
        this.$navigateTo('/pagesMine/certification/bankChoose', {})
      }
    },
    async uploadImage(field) {
      const data = await this.$api.commonApi.uploadImg({ count: 1 })
      if (data.success) {
        const newData = data.url.sort((a, b) => {
          return a.sort - b.sort
        })
        console.log("上传", newData)
        this.$nextTick(()=>{
          this.real[field] = newData[0].url
          let certificates = []
          certificates.push(this.real.front)
          certificates.push(this.real.back)
          this.real.certificates = certificates.join(',')
        })
      }
    },
    // 校验手机验证码
    async validMsg(value) {
      // this.real.verificationCode = value
      // const real = await this.$api.commissionApi.certificationValidMsg(
      //   {
      //     verificationCode: this.real.verificationCode
      //   }
      // )
      // if (real.code === 0) {
      //   console.log('real', real)
      //   this.showPhoneDialog = false
      //   this.codeValid = true
      // }
      this.real.smsCode = value
      console.log("提交:", this.real)
      const res = await this.$api.commissionApi.afterConfirm(this.real)
      this.showPhoneDialog = false
      if (res.code === 0) {
        uni.showToast({
          title: '提交成功',
          icon: 'none',
          duration: 2 * 1000
        })
        setTimeout(() => {
          this.$navigateTo('/pagesMine/certification/success')
        }, 2000);
      }
    },
    // 个人认证信息查询 
    async certificationGet() {
      const real = await this.$api.commissionApi.certificationQuery()
      console.log("个人认证信息查询:", real)
      if (real.code === 0) {
        if (real.data) {
          this.bank_no = real.data.bank_no
          this.real = { ...this.real, ...real.data }
          this.list = real.data.auth_types
        }
      }
    },
    // 重新获取验证码
    async sendMsg(isOver) {
      // this.waittingMsg = isOver
      // if (this.waittingMsg) {
      //   const real = await this.$api.commissionApi.certificationGetSendMsg()
      //   if (real.code === 0) {
      //     console.log('real', real)
      //   }
      // }
      // console.log('isOver', isOver)
      delete this.real['ref']
      const res = await this.$api.commissionApi.certificationSave(this.real)
       if (res.code === 0) {
        this.real.ref = res.data.authRef // 流水号
      }
    },

    // 保存信息, 验证手机号
    async saveReal() {
      // setTimeout(() => {
      //   this.$navigateTo('/pagesMine/certification/success')
      // }, 2000);
      if(this.updateRealname){
        // 审核中跳转去提交页面
        if(this.status_cloud === 2){
          console.log("审核中跳转去提交页面")
          this.$navigateTo(`/pagesMine/certification/editIndex`)
        }
        return
      }
      console.log("codeValid:", this.codeValid, this.updateRealname)
      if (this.canSub) {
        uni.showToast({
          title: this.dataName[this.canSub],
          icon: 'none',
          duration: 2 * 1000
        })
        return
      } else {
        // 检查手机号
        if(!regexp.mobile.test(this.real.bank_mobile)){
          uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none',
          duration: 2 * 1000
        })
          return
        }
        if (!this.codeValid) {
          // this.sendMsg(true)
          this.showPhoneDialog = true
          // return
        }
        // 修改认证
        if (this.updateRealname) {
          // 修改认证
          const updateRes = await this.$api.commissionApi.certificationUpdateCard({
            bankNo: this.real.bank_no,
            bankName: this.real.bank_name,
            bankArea: this.real.bank_area,
            mobile: this.real.bank_mobile
          })
          if (updateRes.code === 0) {
            this.$navigateTo('/pagesMine/certification/success')
          } else {
            uni.showToast({
              title: updateRes.msg,
              icon: 'none',
              duration: 2 * 1000
            })
          }
        } else {
          console.log("提交认证");
          // 提交认证
          delete this.real['auth_types']
          this.real.birthday = this.date.replaceAll("-", '')
          const res = await this.$api.commissionApi.certificationSave(this.real)
          if (res.code === 0) {
            console.log("认证结果", res)
            this.showPhoneDialog = true
            this.real.ref = res.data.authRef // 流水号
            uni.removeStorageSync('realName')
            //返回的url为空则为认证过，返回页面
            // if(!res.data.certification_url){
            //   uni.navigateBack();
            // }else{
            //   // 测试环境地址
            //   if (res.data.certification_url.indexOf('contract-qa') > -1) {
            //     h5NavigateTo(res.data.certification_url.replace('contract-qa', 'contract-qa01'))
            //   } else {
            //     h5NavigateTo(res.data.certification_url.replace('contract', 'contract01'))
            //   }
            // }
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2 * 1000
            })
          }
        }
      }
    },
    onConfirm(data) {
      this.real.bank_area = data[0].name + data[1].name + data[2].name
      this.addressData.province = data[0].name
      this.addressData.city = data[1].name
      this.addressData.area = data[2].name
      this.showAddressPicker = false
    },
    addPlaceholdersToOutput(output, index, placeholder) {
      for (; index < output.length; index++) {
        if (output[index] === '9') {
          output[index] = placeholder
        }
      }
      return output
    },
    maskValue(val, mask) {
      const val1 = mask ? this.toPattern(val, mask) : val
      return val1
    },
    toPattern(value, opts) {
      var pattern = (typeof opts === 'object' ? opts.pattern : opts)
      var patternChars = pattern.replace(/\W/g, '')
      var output = pattern.split('')
      var values = value.toString().replace(/\W/g, '')
      var charsValues = values.replace(/\W/g, '')
      var index = 0
      var i
      var outputLength = output.length
      var placeholder = (typeof opts === 'object' ? opts.placeholder : undefined)

      for (i = 0; i < outputLength; i++) {
      // Reached the end of input
        if (index >= values.length) {
          if (patternChars.length === charsValues.length) {
            return output.join('')
          } else if ((placeholder !== undefined) && (patternChars.length > charsValues.length)) {
            return this.addPlaceholdersToOutput(output, i, placeholder).join('')
          } else {
            break
          }
        } else {
          if ((output[i] === '9' && values[index].match(/[0-9]/))) {
            output[i] = values[index++]
          } else if (output[i] === '9') {
            if (placeholder !== undefined) {
              return this.addPlaceholdersToOutput(output, i, placeholder).join('')
            } else {
              return output.slice(0, i).join('')
            }
            // exact match for a non-magic character
          } else if (output[i] === values[index]) {
            index++
          }
        }
      }
      return output.join('').substr(0, i)
    },
    inputFocus(event, type) {
      if (type === 1) {
        if (event.target.value) {
          this.delete1 = true
        } else {
          this.delete1 = false
        }
      } else if (type === 2) {
        if (event.target.value) {
          this.delete2 = true
        } else {
          this.delete2 = false
        }
      } else if (type === 3) {
        this.useBottomGreyLine = true
        if (event.target.value) {
          this.delete3 = true
        } else {
          this.delete3 = false
        }
      } else if (type === 4) {
        if (event.target.value) {
          this.delete4 = true
        } else {
          this.delete4 = false
        }
      }
    },
    inputBlur(type) {
      setTimeout(() => {
        if (type === 1) {
          this.delete1 = false
        } else if (type === 2) {
          this.delete2 = false
        } else if (type === 3) {
          this.useBottomGreyLine = false
          this.delete3 = false
        } else if (type === 4) {
          this.delete4 = false
        }
      }, 100)
    },
    async loginto(e) {
      if (e.detail.value.length !== 6) {
        return
      }
    },
    verify() {
      switch (this.countryCode) {
        case '+86':
          if (this.getVerify !== '重新获取验证码' || this.phoneNumber.length !== 13) {
            return
          }
          if (!(/^\d{11}$/.test(this.phoneNumber.replace(/\s*/g, ''))) && this.countryCode === '+86') {
            uni.showToast({
              title: '请输入正确的手机号',
              icon: 'none',
              duration: 2 * 1000
            })
          } else {
            this.subcli()
          }
          break
        default:
          this.subcli()
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.upload-card {
  margin-top: 20rpx;
  background-color: #f5f5f5;
  .tit{
    font-size: 30rpx;
    color: #1B1B20;
    line-height: 40rpx;
    padding-top: 36rpx;
    padding-left: 38rpx;
    background: white;
  }
  .box{
    @include flex;
    @include j-between;
    padding: 0 70rpx;
    padding-top: 46rpx;
    margin-bottom: 20rpx;
    background: white;
    .item{
      .tip{
        text-align: center;
        line-height: 32rpx;
        font-size: 28rpx;
        margin-top: 45rpx;
        margin-bottom: 40rpx;
      }
    }
  }
  .tip-box{
    padding-left: 38rpx;
    font-size: 22rpx;
    color: #999999;
    line-height: 32rpx;
    padding-top: 12rpx;
    background: white;
  }
}
.phoneMsgDialog{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  z-index: 2;
  align-items: center;
  background-color: rgba(0,0,0,0.6);
  justify-content: center;
  .content{
    margin-top: -200rpx;
    box-sizing: border-box;
    background-color: #fff;
    padding: 32rpx;
    width: 750rpx;
    height: 470rpx;
    position: relative;
    .close{
      right: 32rpx;
      top: 32rpx;
      width: 28rpx;
      height: 28rpx;
      position: absolute;
    }
    .title{
      font-weight: bold;
      font-size: 34rpx;
      color: #333;
    }
    .subTitle{
      margin-top: 16rpx;
      color: #999;
      font-size: 28rpx;
    }
    .varifyCodeBox{
      display: flex;
      align-items: center;
      margin-top: 68rpx;
      justify-content: space-between;
      .sendMsg{
        width: 176rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 24rpc;
        color: white;
        background-color: #000;
        text-align: center;
        &.disable{
          background-color: #ccc;
        }
      }
      .varifyCode{
        font-size: 28rpx;
        padding-left: 32rpx;
        width: 486rpx;
        height: 80rpx;
        border: 2rpx solid $color-border;
      }
    }
    .closeButton{
      width: 686rpx;
      height: 98rpx;
      line-height: 98rpx;
      font-size: 32rpc;
      margin-top: 48rpx;
      color: white;
      background-color: #000;
      text-align: center;
    }
  }
}
.status-tip{
  font-size: 22rpx;
  color: #19191F;
  text-align: center;
}
.inland-status-tip{
  padding: 28rpx 33rpx 0;
  font-size: 22rpx;
  color: #19191F;
}
 .saveReal{
    position: relative;
    width: calc(100vw - 64rpx);
    color: #fff;
    box-sizing: border-box;
    line-height: 98rpx;
    text-align: center;
    font-size: 28rpx;
    background-color: #f5f5f5;
    margin: 50rpx 32rpx 30rpx;
    .text{
      background-color: #000;
      height: 98rpx;
    }
    &.saveRealUn{
      .text{
        background-color: #ccc;
      }
    }
}
.foreign-card{
  padding-left: 32rpx !important;
  padding-right: 32rpx !important;
}
</style>
